<template>

    <vue-table :data-source="tableList" :search-config="searchConfig">
        <template slot="search" scope="props">
            <i-input v-model="props.items.keyword" placeholder="请输入关键字"></i-input>
        </template>
        <template slot="header">
            <tr>
                <th>ID</th>
                <th>代码</th>
                <th>名称</th>
                <th>结束时间</th>
                <th>作品状态</th>
                <th>命题管理</th>
                <th>操作</th>
            </tr>
        </template>
        <template slot="tbody" scope="props">
            <tr>
                <td>{{props.item.id}}</td>
                <td>{{props.item.code}}</td>
                <td>{{props.item.name}}</td>
                <td>{{props.item.ended_at}}</td>
                <td>
                    <div v-if="props.item.is_hidden == 0">
                        <i-button type="ghost" size="small"><Icon type="eye-disabled"></Icon>隐藏作品</i-button>
                    </div>
                    <div v-else>
                        <i-button type="ghost" size="small"><Icon type="eye"></Icon>显示作品</i-button>
                    </div>
                </td>
                <td>
                    <div>
                        <router-link :to="'/award-company/' + props.item.id">
                            <i-button type="ghost" size="small">
                                <Icon type="compose"></Icon>
                                设置命题
                            </i-button>
                        </router-link>
                    </div>
                </td>
                <td class="col-lg-3">
                    <Tooltip content="编辑" v-if="user.can('create-edit-data')" placement="top">
                        <i-button type="text" v-on:click="showEditDialog(props.item.id)" :disabled="stateManager.buttonLoading">
                            <Icon type="edit" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="设置公示" v-if="user.can('create-edit-data')" placement="top">
                        <i-button type="text" :disabled="stateManager.buttonLoading">
                            <Icon type="wrench" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="设置获奖展示" v-if="user.can('create-edit-data')" placement="top">
                        <i-button type="text" :disabled="stateManager.buttonLoading">
                            <Icon type="share" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="删除未完成作品" v-if="user.can('create-edit-data')" placement="top">
                        <i-button type="text" :disabled="stateManager.buttonLoading">
                            <Icon type="trash-a" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="统计表" v-if="user.can('create-edit-data')" placement="top">
                        <i-button type="text" :disabled="stateManager.buttonLoading">
                            <Icon type="stats-bars" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                </td>
            </tr>
        </template>
    </vue-table>

</template>

<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                list: this.$listDataSource({
                    url: 'api/award'
                }),
                searchConfig: {
                    items: {
                        keyword: ''
                    },
                    status: true,
                    complex: false
                }
            };
        },
        methods: {
            showEditDialog: function (id) {
                this.stateManager.editModelId = id;
                this.stateManager.buttonLoading = true;
            }
        },
        computed: {
            user(){
                return this.$store.state.user;
            },
            tableList(){
                let self = this;
                if (this.stateManager.refreshList) {
                    this.list.fetch({}, function () {
                        self.stateManager.refreshList = false;
                    });
                }
                return this.list;
            }
        }
    }
</script>